<template>
   <div id="bot" v-show="!isShow">
        <ul>
            <li @click="routerClick('/my/index')" class="active">
                <img slot="icon" src="../assets/blue.png">
                <p>我</p>
            </li>
            <li @click="routerClick('/you/index')">
                <img slot="icon" src="../assets/pink.png">
                <p>你</p>
            </li>
            <li @click="routerClick('/she/index')">
                <img slot="icon" src="../assets/purple.png">
                <p>她</p> 
            </li>
            <li @click="routerClick('/he/index')">
                <img slot="icon" src="../assets/yellow.png">
                <p>他</p> 
            </li>
        </ul>
        <marquee class="msg">{{fatherComponent}}</marquee>
   </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  computed: mapGetters(["isShow", "navTitle"]),
  data() {
    return {
      selected: ""
    };
  },
  methods: {
    routerClick(path) {
      this.$router.push(path);
      if (/my/gi.test(path)) {
        this.selected = "我";
      } else if (/you/gi.test(path)) {
        this.selected = "你";
      } else if (/she/gi.test(path)) {
        this.selected = "她";
      } else if (/he/gi.test(path)) {
        this.selected = "他";
      }
      window.sessionStorage.setItem("navTitle", this.selected);
      //vuex传参写法
      this.$store.dispatch("changeTitle", this.selected);
    }
  },
  mounted() {
    $("#bot li").on("click", function() {
      $("#bot li").removeClass("active");
      $(this).addClass("active");
      var index = $(this).index();
      window.sessionStorage.setItem("tabIndex", index);
    });
    var index = window.sessionStorage.getItem("tabIndex");
    $("#bot li").removeClass("active");
    $("#bot li").eq(index).addClass("active");
  },
  props: ["fatherComponent"],
};
</script>

<style scoped>
#bot {
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  height: 1rem;
  width: 100%;
  overflow: hidden;
  background-color: #ccc;
  z-index: 2;
}
#bot>ul{
    height: 100%;
}
#bot li {
  float: left;
  width: 25%;
  height: 100%;
}
#bot li img {
  width: 30%;
}
#bot li img,#bot li p{
  margin-top: 0.08rem;
}
.active {
  background: #e8e8e8;
}
.msg{
  position: absolute;
  left: 0;
  top:30%;
  width: 100%;
  color:blue;
  font-weight:bold;
  font-size: 14px
}
</style>
